<!-- 重点单位申报 -->
<template>
  <div class="top">
    <div class="container bodyStyle">
      <div class="content">
        <el-row style="margin-bottom: 20px">
          <el-col class="list_Title">
            消防安全重点单位申报表
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20" offset="2">
            <el-form :model="form" size="mini" :rules="rules" @validate="validateEvent" ref="formName">
              <table class="table" border="1">
                <tr class="textStyle">
                  <td colspan="3" class="title">单位名称</td>
                  <td colspan="4">
                    <el-form-item prop="DWMC" :class="{ validate: !validateList.DWMC }">
                      <el-input v-model="form.DWMC"></el-input>
                    </el-form-item>
                  </td>
                  <td colspan="3" class="title">联系电话</td>
                  <td colspan="4">
                    <el-form-item prop="LXDH" :class="{ validate: !validateList.LXDH }">
                      <el-input v-model="form.LXDH"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr class="textStyle">
                  <td colspan="3" class="title">地址</td>
                  <td colspan="4">
                    <el-form-item prop="DZ" :class="{ validate: !validateList.DZ }">
                      <el-input v-model="form.DZ"></el-input>
                    </el-form-item>
                  </td>
                  <td colspan="3" class="title">邮编</td>
                  <td colspan="4">
                    <el-form-item prop="YB" :class="{ validate: !validateList.YB }">
                      <el-input v-model="form.YB"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr class="textStyle">
                  <td colspan="3" class="title">消防安全负责人</td>
                  <td colspan="4">
                    <el-form-item prop="XFAQZRR" :class="{ validate: !validateList.XFAQZRR }">
                      <el-input v-model="form.XFAQZRR"></el-input>
                    </el-form-item>
                  </td>
                  <td colspan="3" class="title">联系电话</td>
                  <td colspan="4">
                    <el-form-item prop="ZRRLXDH" :class="{ validate: !validateList.ZRRLXDH }">
                      <el-input v-model="form.ZRRLXDH"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr class="textStyle">
                  <td colspan="3" class="title">消防安全管理人</td>
                  <td colspan="4">
                    <el-form-item prop="XFAQGLR" :class="{ validate: !validateList.XFAQGLR }">
                      <el-input v-model="form.XFAQGLR"></el-input>
                    </el-form-item>
                  </td>
                  <td colspan="3" class="title">联系电话</td>
                  <td colspan="4">
                    <el-form-item prop="GLRLXDH" :class="{ validate: !validateList.GLRLXDH }">
                      <el-input v-model="form.GLRLXDH"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td class="title textStyle" style="padding: 10px !important">
                    申报单位属性
                  </td>
                  <td colspan="13">
                    <el-form-item prop="SBDWSXCopy" v-for="(value, i) in XFJD_GX_SBDWSX" :key="i">
                      <el-divider class="divider" v-if="i != 0"></el-divider>
                      <el-col :span="24" style="padding-left: 20px;" v-for="(item, index) in value" :key="index">
                        <el-checkbox v-model="form.SBDWSXCopy" v-if="item.dictKey" :label="item.dictKey"><span style="vertical-align: middle;line-height:190%">{{
                          item.dictValue
                        }}</span></el-checkbox>
                        <div v-else class="textStyle">{{ item.dictValue }}</div>
                        <el-col v-if="item.children" style="margin-left:32px">
                          <el-checkbox style="display:block" v-model="form.SBDWSXCopy" v-for="element in item.children" :key="element.dictKey" :label="element.dictKey">{{
                            element.dictValue
                          }}</el-checkbox>
                        </el-col>
                      </el-col>
                    </el-form-item>
                  </td>
                </tr>
                <tr class="textStyle">
                  <td class="title" style="font-size: 24px;font-weight: 700">
                    注
                  </td>
                  <td colspan="13" style="padding: 10px;font-size: 15px">
                    <el-col>1.一个物业小区内有多栋符合重点单位界定标准的高层住宅且同属一个物业服务企业管理的，按一个消防安全重点单位申报。</el-col>
                    <el-col>2.在一个符合界定标准建筑物内另有符合界定标准而法人不同的单位，应当各自独立申报。</el-col>
                    <el-col>3.管理住宅物业 100
                      万平方米以上的物业服务企业，应当向该企业办公所在地公安机关消防机构申报。</el-col>
                  </td>
                </tr>
                <tr>
                  <td colspan="14" style="text-align: center;line-height: 40px;vertical-align: top;">
                    <el-button type="primary" @click="save('formName')" size="mini">提交</el-button>
                    <el-button type="warning" @click="cancal('formName')" size="mini">取消</el-button>
                  </td>
                </tr>
              </table>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// import { getDictionary } from "@/api/system/dict";
// import { getShow, addShow, updateShow } from "@/api/table/table";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      form: {
        DWMC: null,
        LXDH: null,
        DZ: null,
        YB: null,
        XFAQZRR: null,
        ZRRLXDH: null,
        XFAQGLR: null,
        GLRLXDH: null,
        SBDWSX: null,
        SBDWSXCopy: [],
      },
      XFJD_GX_SBDWSX: [
        [
          {
            dictValue: "1.经营可燃商品，且总建筑面积3000平方米以上或者任一楼层建筑面积1500平方米以上（含本数，下同）的商场（商店、市场）。",
            dictKey: 1
          },
          {
            dictValue: "2.建筑面积10000平方米以上或者铺面、摊位1000个以上的室内集贸市场（商业区）。",
            dictKey: 2
          },
          {
            dictValue: "3.客房数50间以上的宾馆、饭店。",
            dictKey: 3
          },
          {
            dictValue: "4.营业面积1500平方米以上不具有娱乐功能的餐饮场所。",
            dictKey: 4
          },
          {
            dictValue: "5.固定座位数3000个以上的公共体育场（馆）。",
            dictKey: 5
          },
          {
            dictValue: "6.固定座位数2000个以上的公共会堂。",
            dictKey: 6
          },
          {
            dictValue: "7.建筑面积300平方米以上的舞厅、卡拉OK厅、夜总会等歌舞娱乐场所。",
            dictKey: 7
          },
          {
            dictValue: "8.建筑面积500平方米以上的下列场所：",
            dictKey: 8,
            children: [
              {
                dictValue: "影剧院、礼堂、录像厅等演出、放映场所；",
                dictKey: 9,
              },
              {
                dictValue: "桑拿浴室、美容院、洗脚房等营业性健身、休闲场所；",
                dictKey: 10,
              },
              {
                dictValue: "游艺、娱乐场所；",
                dictKey: 11,
              },
              {
                dictValue: "具有娱乐功能的音乐茶座和餐饮场所。",
                dictKey: 12,
              },
            ]
          },
          {
            dictValue: "9.设置100台以上电脑的网吧。",
            dictKey: 13
          },
          {
            dictValue: "上述第7、8项，同类场所分布在同一建筑不同位置，且属于同一单位的，场所的建筑面积以累加数计算。",
          },
        ],
        [
          {
            dictValue: "1.住院床位100张以上的医院（包含医院的住院康复部）。",
            dictKey: 14
          },
          {
            dictValue: "2.住宿床位50张以上的养老院、福利院。",
            dictKey: 15
          },
          {
            dictValue: "3.幼儿人数300人以上的托儿所、幼儿园，幼儿住宿床位50张以上的托儿所、幼儿园（不含午托）。",
            dictKey: 16
          },
          {
            dictValue: "4.学生数2000人以上的非寄宿制学校，学生住宿床位100张以上的小学学校，学生住宿床位200张以上的其他学校。",
            dictKey: 17
          },
          {
            dictValue: "上述床位按每床1人计算。",
          },
        ],
        [
          {
            dictValue: "负责下列国家机关办公场所的管理或服务部门："
          },
          {
            dictValue: "1.县级以上的党委、人大、政府、政协。",
            dictKey: 18
          },
          {
            dictValue: "2.县级以上的人民检察院、人民法院。",
            dictKey: 19
          },
        ],
        [
          {
            dictValue: "县级以上广播电台、电视台和通信枢纽。",
            dictKey: 20
          }
        ],
        [
          {
            dictValue: "1.二级以上客运车站的候车厅。",
            dictKey: 21
          },
          {
            dictValue: "2.建筑规模设计旅客聚集量1500人以上的港口客运站的候船厅。",
            dictKey: 22
          },
          {
            dictValue: "3.民用机场的候机厅。",
            dictKey: 23
          },
        ],
        [
          {
            dictValue: "1.建筑面积2000平方米以上的公共图书馆、展览馆。",
            dictKey: 24
          },
          {
            dictValue: "2.公共博物馆、县级以上档案馆。",
            dictKey: 25
          },
          {
            dictValue: "3.具有火灾危险性的省级以上文物保护单位（构筑物除外）或其管理单位。",
            dictKey: 26
          },
        ],
        [
          {
            dictValue: "1.大型发电厂（站）。",
            dictKey: 27
          },
          {
            dictValue: "2.县级以上供电公司（电业局）。",
            dictKey: 28
          }
        ],
        [
          {
            dictValue: "1.具有经营二级以上汽车加油（气）站、加油加气合建站的单位（含分支机构）。",
            dictKey: 29
          },
          {
            dictValue: "2.II级以上液化石油气供应站（换瓶站）。",
            dictKey: 30
          },
          {
            dictValue: "3.生产易燃易爆化学物品的工厂。",
            dictKey: 31
          },
          {
            dictValue: "4.易燃易爆气体和液体的灌装站、调压站。",
            dictKey: 32
          },
          {
            dictValue: "5.储存易燃易爆化学物品的专用仓库（场所、储罐场所）。",
            dictKey: 33
          },
          {
            dictValue: "6.易燃易爆化学物品的专业运输单位。",
            dictKey: 34
          },
          {
            dictValue: "7.经营甲乙类易燃易爆危险化学品面积500平方米以上的商店或危险化学品储量达500公斤以上的商店。",
            dictKey: 35
          }
        ],
        [
          {
            dictValue: "同一建筑生产车间建筑总面积6000平方米以上的劳动密集型企业。",
            dictKey: 36
          }
        ],
        [
          {
            dictValue: "设有国家级重点实验室的科研单位。",
            dictKey: 37
          }
        ],
        [
          {
            dictValue: "1.一类高层公共建筑，建筑高度50米以上的非住宅类居住建筑。",
            dictKey: 38
          },
          {
            dictValue: "2.城市地下铁道、地下观光隧道，海底隧道和城市重要的交通隧道。",
            dictKey: 39
          },
          {
            dictValue: "3.国家储备粮库、总储备量10000吨以上的其他粮库。",
            dictKey: 40
          },
          {
            dictValue: "4.总储量500吨以上的棉库。",
            dictKey: 41
          },
          {
            dictValue: "5.总储量10000立方米以上的木材堆场。",
            dictKey: 42
          },
          {
            dictValue: "6.仓储场所建筑面积10000平方米以上的物流企业（园区），可燃物品仓库（堆场）。",
            dictKey: 43
          },
        ],
        [
          {
            dictValue: "管理区分所有权高层公共建筑、高度100米以上的高层住宅的物业服务企业，管理住宅物业总建筑面积100万平方米以上的物业服务企业。",
            dictKey: 44
          }
        ],
        [
          {
            dictValue: "1.汽车、钢铁、烟草企业，具备制造千吨级以上船舶能力的造船工业企业。",
            dictKey: 45
          },
          {
            dictValue: "2.营业厅建筑面积超过2000平方米的证券交易所。",
            dictKey: 46
          },
          {
            dictValue: "3.二级分行以上的银行，办公场所设在高层建筑内的县（市）银行支行。",
            dictKey: 47
          },
        ]
      ],
      rules: {
        DWMC:[
          { required: true, message: '请选择活动区域', trigger: ['blur','change','input'] }
        ],
        LXDH:[
          { required: true, message: '请选择活动区域', trigger: ['blur','change','input'] }
        ]
      },
      validateList: {
        DWMC: true,
        LXDH: true,
        DZ: true,
        YB: true,
        XFAQZRR: true,
        ZRRLXDH: true,
        XFAQGLR: true,
        GLRLXDH: true,
      },
    };
  },
  mounted() {
    // this.getDict();
    this.form.DWMC = this.userInfo.company_name;
    if (this.$route.query.ID) {
      this.getDetail();
    }
  },

  computed: { ...mapGetters(["setIp", "userInfo"]) },
  methods: {
    //校验
    validateEvent(value, status, ff, dd) {
      console.log(value,status,ff,dd,'---校验事件')
      this.validateList[value] = status;
      console.log(this.validateList);
    },
    //提交
    save(formName) {
      this.form.SBDWSX = this.form.SBDWSXCopy.join(",");
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          if (this.$route.query.ID) {
            this.form.dwid = "4318";
            let obj = {
              data: this.form,
              runId: this.setIp.runId,
              dwId: 4318,
            };
            // console.log(obj,'obj---')
            let res = await updateShow(
              this.$qs.stringify({
                name: JSON.stringify(obj),
              })
            );
            if (res.code == 200) {
              this.$message.success("修改成功");
            }
            // console.log("updateShow", res);
          } else {
            let res = await addShow(
              this.$qs.stringify({
                name: JSON.stringify({
                  data: this.form,
                  runId: this.setIp.runId,
                  dwId: "4318",
                }),
              })
            );
          }
          this.$router.go(-1);
        } else {
          this.$message.error("请填校验信息是否正确");
          return false;
        }
      });
    },
    //取消返回上一页
    cancal() {
      this.$router.go(-1);
    },
    //获取表单详情
    async getDetail() {
      let { data } = await getShow(1, 100000, this.setIp.runId, {
        obj: {
          ID: this.$route.query.ID,
        },
        dwId: 4318,
      });
      for (let key in data.data.records[0]) {
        this.$set(this.form, key, data.data.records[0][key]);
      }
      this.form.SBDWSXCopy = this.form.SBDWSX.split(",");
      console.log(this.form, "this.form---");
      console.log(data, "获取表单详情");
    },
    //获取字典
    // async getDict() {
    //   const [...promises] = await Promise.all([
    //     getDictionary({ code: "XFJD_GX_SBDWSX" }), //申报单位属性的字典表
    //   ]);
    //   // console.log( promises[0].data.data)
    //   this.XFJD_GX_SBDWSX = promises[0].data.data;
    // },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  background: #fff;
}
.top {
  width: 100%;
  text-align: center;
}
.bodyStyle {
  text-align: left;
  background: #fff;
  padding-left: 10px;
  padding-right: 10px;
  width: 1180px;
  display: inline-block;
}
.content {
  padding: 30px 0;
  line-height: 30px;
  /* font-size: 20px; */
}
.list_Title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
}
/* 表格样式 */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table tr td {
  width: calc(100% / 14);
  font-size: 14px;
}
.table tr td:not([class*="title"]) {
  vertical-align: top;
}
.table .title {
  text-align: center;
  font-size: 15px;
}
/deep/ .table .el-input--mini .el-input__inner {
  border: none !important;
  border-radius: unset !important;
  font-size: 14px;
}
/deep/ .table .el-form-item {
  margin-top: 3px;
  margin-bottom: 0px;
}
/* 规则校验动态显示 */
/deep/ .table .el-form-item.validate {
  margin-bottom: 16px;
}
/* 解决checkbox不换行问题 */
/deep/ .el-checkbox__label {
  white-space: normal;
  word-break: break-all;
  vertical-align: top;
}
.divider {
  margin: 4px 0;
}
.textStyle {
  color: #606266;
}
</style>

